<template>
  <div class="box section clearfix">
    <el-form :inline="true" style="text-align: left" ref="query" :model="query">
      <el-row class="query">
        <el-col :span="24">
          <el-form-item label="下款时间:" prop="beginDate">
            <el-date-picker
              v-model="query.beginDate"
              type="month"
              placeholder="选择日期" value-format="yyyy-MM">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="业务渠道:">
            <el-input
              placeholder="请输入"
              v-model="query.businessChannel"
            ></el-input>
          </el-form-item>
          <el-form-item label="业务经理:" prop="businessManagerId">
            <el-select filterable
                       remote
                       reserve-keyword
                       placeholder="请选择"
                       :remote-method="remoteMethod"
                       :loading="loading"
                       v-model="query.businessManagerId">
              <el-option
                v-for="item in options"
                :key="item.businessManagerId"
                :label="item.businessManager"
                :value="item.businessManagerId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-form-item label="贷款类型:" prop="productId">
          <el-select placeholder="请选择" v-model="query.productId">
            <el-option
              v-for="item in statusArray"
              :key="item.itemValue"
              :label="item.description"
              :value="item.itemValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户姓名:" prop="customer">
          <el-input
            placeholder="请输入"
            v-model="query.customer"
          ></el-input>
        </el-form-item>
        <el-form-item label="结清状态:" class="" prop="isOver">
          <el-select v-model="query.isOver" placeholder="请选择">
            <el-option
              label="已结清"
              value="1"
            >
            </el-option>
            <el-option
              label="未结清"
              value="0"
            >
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item class="btn">
          <el-button type="danger" @click="clearFun" v-no-more-click
          >清空
          </el-button
          >
          <el-button type="primary" @click="queryFun" v-no-more-click
          >搜索
          </el-button
          >
        </el-form-item>
        <el-col :span="24">
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="orderExport"
              v-no-more-click
            >导出
            </el-button
            >
            <el-button
              size="small"
              type="primary"
              @click="PersonnelDia=true"
              v-no-more-click
              v-if="query.execMonth"
            >添加
            </el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="del"
              v-no-more-click
              v-if="query.execMonth"
            >删除
            </el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="80px"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="beginDate"
        label="客户下款 月份"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="businessChannel"
        label="业务渠道"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="businessManager"
        label="业务经理"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="productName"
        label="贷款类型"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="customer"
        label="客户姓名"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="guaranteeMoneyStr"
        label="贷款金额 （单位：万元）"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="guaranteeMonth"
        label="贷款期数"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="depositStr"
        label="保证金 费率"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="margin"
        label="收到保证金 （元）"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="principalMoney"
        label="每月分期 还款金额 （元）"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="periods"
        label="已还月数"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="isOverStr"
        label="结清状态"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="收入" align="center">
        <el-table-column
          prop="totalRepayment"
          label="累积还款 （元）"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="overMoney"
          label="提前结清 （元）"
          align="center"
          :show-overflow-tooltip="true"
        />
      </el-table-column>
      <el-table-column label="支出" align="center">
        <el-table-column
          prop="guaranteeFee"
          label="担保费 （元）"
          align="center"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          prop="riskReserve"
          label="风险备付 金（元）"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="postLoan"
          label="贷后 （元）"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="intermediaryRebate"
          label="中介返佣 提成 （元）"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="notaryFee"
          label="公证费 （元）"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="receptionFee"
          label="银行客户 经理接待 费"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="refundDeposit"
          label="退保证金 （元）"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="otherFee"
          label="其他"
          align="center"
          :show-overflow-tooltip="true"
        />
      </el-table-column>
      <el-table-column label="结清 （元）" align="center">
        <el-table-column
          label="息差 （元）"
          prop="spread"
          align="center"
          :show-overflow-tooltip="true"
        />
      </el-table-column>
      <el-table-column
        prop="noRepayMoney"
        label="代偿未结清金额 （元）"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="{row}">
          <el-button
            type="text"
            size="small"
            @click="detailsFun(row)"
            style="color: #3B9DF8"
            v-no-more-click
          >修改
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="修改数据："
      :visible.sync="PersonnelDia"
      append-to-body
      width="60%"
      top="30px"
      @close="cancel"
    >
      <el-row>
        <el-form :inline="true" style="text-align: left" label-width="160px">
          <el-col :span="12" class="indexClass">
            <el-form-item label="累积还款：">
              <el-input
                v-model="addForm.totalRepayment"
                readonly
              ></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="12" class="indexClass">
            <el-form-item label="提前结清：">
              <el-input
                v-model="addForm.overMoney"
                readonly
              ></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>

          <el-col :span="12" class="indexClass">
            <el-form-item label="担保费：">
              <el-input
                v-model="addForm.guaranteeFee"
                type="number"
              ></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="12" class="indexClass">
            <el-form-item label="风险备付金：">
              <el-input
                maxlength="9"
                type="number"
                v-model="addForm.riskReserve"
              ></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="12" class="indexClass ">
            <el-form-item label="贷后：">
              <el-input
                maxlength="9"
                type="number"
                v-model="addForm.postLoan"
              ></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="12" class="indexClass ">
            <el-form-item label="中介返佣提成：">
              <el-input
                maxlength="9"
                type="number"
                v-model="addForm.intermediaryRebate"
              ></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="12" class="indexClass ">
            <el-form-item label="公证费：">
              <el-input
                maxlength="9"
                type="number"
                v-model="addForm.notaryFee"
              ></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="12" class="indexClass ">
            <el-form-item label="银行客户经理接待费：">
              <el-input
                maxlength="9"
                type="number"
                v-model="addForm.receptionFee"
              ></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="12" class="indexClass ">
            <el-form-item label="退保证金：">
              <el-input
                maxlength="9"
                type="number"
                v-model="addForm.refundDeposit"
              ></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="12" class="indexClass ">
            <el-form-item label="其他：">
              <el-input
                maxlength="9"
                type="number"
                v-model="addForm.otherFee"
              ></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dbfqForm">确 定</el-button>
      </span>

    </el-dialog>

  </div>
</template>

<script>
import {
  getPermType,
  queryBusinessManager,
  updateExpenditure,
  financePagingQuery
} from "../../../src/assets/js/api";
import { expotOut } from "../../assets/js/utlis";
import { checkPermiss } from "../../assets/js/utlis";

export default {
  name: "customerClosure",
  data() {
    return {
      query: {
        pageSize: 10,
        pageNum: 1,
        beginDate: "",
        businessManagerId: "",
        productId: "",
        customer: "",
        isOver: "",
        businessChannel:'',
      },
      tableData: [],
      total: 10,
      pages: 0,
      currentPage: 1,
      PersonnelDia: false,
      fileParmas: {},
      addForm: {}, //添加数据data
      statusArray: [],
      golbalPermissions: [],
      options: [],
      loading: false
    };
  },
  created() {
    this.getList();
    this.getProductsData();
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
  },
  computed: {
    userInfoExport: function() {
      return checkPermiss("business:sign:exportPerson", this.golbalPermissions);
    }
  },
  methods: {
    //添加数据提交更新或者编辑
    dbfqForm() {
      console.log(this.addForm);
      //跟新
      updateExpenditure(this.addForm).then(() => {
        this.$message.success("提交成功");
        this.cancel();
        this.getList();
      });
    },
    //热收缩
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        queryBusinessManager(query).then(res => {
          this.loading = false;
          this.options = res.data;
          console.log(res);

        });

      }
    },
    //添加/编辑关闭弹层
    cancel() {
      this.PersonnelDia = false;
      this.addForm = {};
    },

    // 获取产品数组列表!
    getProductsData() {
      getPermType("order_product").then((res) => {
        this.statusArray = res.data.map(item => {
          item.itemValue = +item.itemValue;
          return item;
        });

      });
    },


    //   获取数据
    getList() {
      financePagingQuery(this.query).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.currentPage = res.data.current;
          this.total = res.data.total;
          this.pages = res.data.pages;
        }
      });
    },
    // 编辑
    detailsFun(row) {
      this.PersonnelDia = true;
      this.addForm = { ...row };
      // this.addForm.id=row.orderNum;
      console.log(row);
    },

    //   清空按钮
    clearFun() {
      this.$refs["query"].resetFields();
      this.query={};
      this.getList();
    },

    // 搜索按钮
    queryFun() {
      this.query.pageNum = 1;
      this.getList();
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNum = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getList();
    },
    orderExport() {
      this.fileParmas = { ...this.query };
      expotOut(
        "post",
        "/business/finance/exportCompleteData",
        this.fileParmas, // 导出请求参数
        "客户完结情况表" // 导出文件名字
      );
    }
  }
};
</script>

<style scoped type="less">
::v-deep .el-table td {
  padding: 10px 0;
}

::v-deep .el-table th {
  padding: 10px 0;
}

.query ::v-deep .el-input__inner {
  height: 32px;
}

.query ::v-deep .el-input__icon {
  line-height: 32px;
}

.query ::v-deep .el-form-item {
  width: 320px;
}

.query ::v-deep .vue-treeselect__control {
  line-height: 30px;
  height: 32px;
}

.query ::v-deep .vue-treeselect__single-value,
.query ::v-deep .vue-treeselect__placeholder {
  line-height: 30px;
}

::v-deep .btn .el-button {
  line-height: 0;
  width: 80px;
  height: 32px;
}

::v-deep .el-table th > .cell {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(59, 157, 248, 0.1);
}

.box {
  position: relative;
  padding: 20px 20px 50px 20px;
  background: #fff;
}

::v-deep .el-pagination {
  position: absolute;
  right: 0;
  margin-top: 20px;
}

::v-deep .el-pagination__total {
  visibility: hidden;
}

.title {
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  position: absolute;
  left: 0;
  margin-top: 15px;
  color: rgba(51, 51, 51, 1);
}

/deep/ .indexClass {
  position: relative;
}

.indexBox {
  position: absolute;
  top: 10px;
  right: 20%;
  /*font-size: 18px;*/
  /*color: red;*/
}

::v-deep .el-form-item__content {
  width: 220px;
}

::v-deep .el-dialog__footer {
  text-align: center;
}
</style>
